<template>
  <el-dialog title="编辑"  :close-on-click-modal="false" :visible.sync="show" 
  class="dialog_index dialog_banner site_fixed" :before-close="cancle">
   <el-form ref="form" v-loading="loading"  class="faq_form">
      <el-tabs type="card" v-model="activeName">
        <el-tab-pane :label="item.site" :name="item.site" v-for="item  in formList" :key="item.id">
          <el-form-item label="FAQ一级类型：">
            <el-select  v-model="item.faq_type_relatetion_id"  filterable
            :placeholder="'FAQ一级类型('+item.site+')（必填项)'"    @change="(value)=>changeFaqType(value, item)" >
              <el-option v-for="item in item.faqTypeList" :key="item.id" :value="item.faq_id" :label="item.label"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="FAQ二级类型：">
            <el-select  v-model="item.faq_type_second_id"  @change="changeSecondType(item)"
            :placeholder="'FAQ二级类型('+item.site+')（必填项)'" filterable >
              <el-option v-for="item in item.faqSecondTypeList" :key="item.id" :value="item.faq_id" :label="item.label"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="问题：">
            <el-input type="textarea" autosize :placeholder="'问题('+item.site+')（必填项)'" v-model="item.questions"></el-input>
          </el-form-item>
          <el-form-item label="答案：" class="editor_content">
            <tinymce_editor v-model="item.answers"  
            :toolbar1="toolbar1" :toolbar2='toolbar2' ref="editor"></tinymce_editor>         
          </el-form-item>
        </el-tab-pane>
      </el-tabs>
     
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button type="search" :loading="is_submit" @click="submitForm">保存</el-button>
      <el-button @click="cancle">取消</el-button>
    </span>
   </el-dialog>
</template>

<script>
import { editPost, editGet } from '@/api/support/faq.js'
import { allFaqTypeList, allFaqSecondTypeList } from '@/api/support/faqType.js'
import TinyMce from '@/components/Tinymce' 
export default {
  data () {
    return {
      formList:[],
      loading: false,
      activeName: 'us',
      is_submit : false,
      toolbar1: 'code undo redo link',
      toolbar2: '',
      faqTypeList: []
    }
  },
  components:{tinymce_editor: TinyMce},
  props: {
    show: Boolean,
    closeDialog:Function,
    id: Number
  },
  watch: {
    show:function(){
      if(this.show){
        this.loading = true
        this.getData()
      }
    }
  },
  methods: {
    getAllFaqTypeList () {
      allFaqTypeList().then(res=>{
        let data = res.data
        let list = this.formList
        for(let i = 0; i < list.length; i++){
          list[i].faqTypeList = data[list[i].site_id]
        }
        this.formList = list
        this.getAllFaqSecondTypeList(list[0], list[0].faq_type_relatetion_id)
      })
    },
    getAllFaqSecondTypeList(item, value) {// 获取所有站点二级类型
      let faqTypeList = item.faqTypeList
      let product_ids= []  //根据当前一级类型获取二级类型
      for(let i = 0; i < faqTypeList.length; i++) {
        if(faqTypeList[i].faq_id == value){
          product_ids = faqTypeList[i].faq_ids
        }
      }
      let params = {
        faq_ids: product_ids
      }
      allFaqSecondTypeList(params).then(res=>{
        let data = res.data
        let list = this.formList 
        for(let i = 0; i < list.length; i++){
          list[i].faqSecondTypeList = data[list[i].site_id]
        }
        this.formList = list
      })
    },
    changeSecondType(item){
      let list = this.formList 
      for(let i =0; i< list.length; i++){
        list[i].faq_type_second_id = item.faq_type_second_id
      }
    },
    changeFaqType (value, item) {
      let list = this.formList 
      for(let i =0; i< list.length; i++){
        list[i].faq_type_relatetion_id = item.faq_type_relatetion_id
        list[i].faq_type_second_id  = '' // 清空二级类型
      }
      this.getAllFaqSecondTypeList(item, value)
    },
    getData () {
      let params = {
        faq_id: this.id
      }
      editGet(params).then(res=>{
        let list = res.data
        for (let i = 0; i < list.length; i++){
          list[i].faqTypeList = []
          list[i]. faqSecondTypeList = []
          if (i == 0){
            this.activeName = list[i].site
          }
        }
        this.formList = list
        this.loading = false
          this.getAllFaqTypeList()

      })
    },

    submitForm () {
     let status = this.validateForm()
     if(status && !this.is_submit){
       this.editData()
     }
    },
    editData () {
      let list = this.formList
      for(let i = 0; i < list.length; i++){
        for(let j = 0; j< list[i].faqTypeList.length; j++) {
          if(list[i].faq_type_relatetion_id == list[i].faqTypeList[j].faq_id) {
            list[i].faq_type_id = list[i].faqTypeList[j].id
          }
        }
      }
      for(let i = 0; i < list.length; i++){
        delete list[i].faqTypeList
      }
      let params = {
        data: JSON.stringify(list),
        product_id: this.id
      }
      this.is_submit = true
      editPost(params).then(res => {
        if(res.state == 1){
          this.$message.success('保存成功')   
          this.cancle()
        }
        this.is_submit = false
      })
    },
    validateForm () {
      let list = this.formList

      let status = true
      for ( let i = 0; i < list.length; i++ ){
        if (list[i].faq_type_relatetion_id === '') {
          this.$message.error('站点' + list[i].site + 'FAQ一级类型为必填项')
          status = false
          break
        }
        if (list[i].faq_type_second_id === '') {
          this.$message.error('站点' + list[i].site + 'FAQ二类型为必填项')
          status = false
          break
        }
        if (list[i].questions === '') {
          this.$message.error('站点' + list[i].site + '问题为必填项')
          status = false
          break
        }

        if (list[i].answers === '') {
          this.$message.error('站点' + list[i].site + '答案为必填项')
          status = false
          break
        }
      }
      return status
    },
    
    cancle(){
      // this.$refs.addSiteFrom.clearValidate();
      this.$refs.form.resetFields(); // 清空原来的数据
      this.$emit('closeDialog')

    },
  },
 
}
</script>

<style lang="scss">

</style>